<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body {
            height:100%;
        }
        body {
            margin: 0;
            background: linear-gradient(to bottom, palevioletred, darkslategray 90%);
            overflow:hidden;
        }

        ul {
            list-style: none;
            margin: 100px auto;
            width: 560px;
            height: 380px;
            display: flex;
            position: relative;
        }

        li {
            flex: 1;
            position: relative;
            transform-style: preserve-3d;
        }

        li div {
            width: 100%;
            height: 100%;
            position: absolute;
        }

        ul a {
            text-decoration: none;
            color: white;
            background: gray;
            position: absolute;
            width: 40px;
            height: 60px;
            font: 700 40px/60px "mirosoft yahei";
            top: 50%;
            transform: translateY(-50%);
            text-align: center;
            border-radius: 10px;
        }

        a::selection {
            background: transparent;
        }

        a.left {
            left: -50px;
        }

        a.right {
            right: -50px;
        }
    </style>
    <script src="jquery-3.0.0.min.js"></script>
    <script>
        onload = function(){
            $(document).ready(function () {
                var numb = 0;
                li(100, 560);
                $(".left").on("click", function () {
                    numb--;
                    $("li").css("transform", "rotateX(" + numb * 90 + "deg)");
                });
                $(".right").on("click", function () {
                    numb++;
                    $("li").css("transform", "rotateX(" + numb * 90 + "deg)");
                });
                function li(n, width) {
                    var arr = [];
                    var li =
                            '<li>'+
                            '<div></div>'+
                            '<div></div>'+
                            '<div></div>'+
                            '<div></div>'+
                            '</li>';
                    for(var i = 0 ;i<n;i++){
                        arr.push(li);
                    }
                    $("ul").append(arr.join("")+
                            '<a href="javascript:void(0)" class="left">&lt;</a>'+
                            '<a href="javascript:void(0)" class="right">&gt;</a>'
                    )
                    $("li").each(function (index, ele) {
                        $(ele).css("transition", "all 1s " + .1 * index + "s").children().each(function (index, ele) {
                            $(ele).css({
                                "background": "url(i/0" + (index + 1) + ".jpg) no-repeat",
                                "transform": "rotateX(" + index * 90 + "deg) translateZ(190px)",
                            });
                        });
                        $(ele).children().css({
                            "backgroundPosition": "" + -index * width / n + "px 0px",
                            "backgroundSize":"cover"
                        })
                    });
                }
            });
        };

    </script>
</head>
<body>
<ul>

</ul>
</body>
</html>